<template>
	<view class="content"  style="width: 100vw;height: 100vh" :style="{'background':kbackgroundColor2}">
		<hx-navbar title="充值" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto">
		</hx-navbar>
		<image class="bg" src="/static/index/collect_bg.jpg" mode="scaleToFill"></image>
		<view class="content-top">
			<view class="top">
				<view class="top_left">
					充值到
				</view>
				<view class="top_right">
					<!-- <image src="/static/index/wx.png" mode="widthFix" class="wx_img"></image> -->
					<view class="right_title">
						我的余额
					</view>
				</view>
			</view>


			<!-- 提现部分 -->
			<view class="box">
				<view class="box_title">
					充值金额
				</view>
				<view class="box_input">
					<view class="box_symbol">
						￥
					</view><input type="number" v-model="money" class="box_symbol2" placeholder="请输入充值金额"
						placeholder-class="fsz24 color-o" />
				</view>

			</view>

		</view>

		<!-- 按钮 -->
		<!-- 		<view class="btn_btn red_btn" v-if="isSubmit" @click="toCash" :disabled='submitStatus' :loading='submitStatus'>
			立即提现
		</view>
		<view class="btn_btn" v-else-if="!isSubmit" disabled>
			立即提现
		</view> -->

		<view class="bottom_box">

			<view class="submit_btn" @click="navigateToHandle()">
				<text>
					立即充值
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {}, // 用户信息
				payments: [], // 可用充值方式列表
				money: '', // 充值的金额
				orderType: 2 // 充值类型
			}
		},
		onLoad() {
			this.userInfo()
		},
		methods: {
			// 获取用户信息
			userInfo() {
				this.$api.userInfo({}, res => {
					if (res.status) {
						this.user = res.data
					}
				})
			},
			// 去充值
			navigateToHandle() {
				if (!Number(this.money)) {
					this.$common.errorToShow('请输入要充值的金额')
				} else {
					this.$common.navigateTo('/pages/payment/index?recharge=' + Number(this.money) + '&type=' + this
						.orderType)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-top {
		position: relative;
		width: 100%;
		padding: 0 30rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 50rpx;

	}

	.top_left {
		font-size: 28rpx;
		color: #fff;
	}

	.top_right {
		display: flex;
		align-items: center;
	}

	.wx_img {
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
	}

	.right_title {
		font-size: 28rpx;
		color: #fff;
	}

	/* ................................. */

	.note {
		display: flex;
		font-size: 24rpx;
		color: #fff;
		margin-top: 30rpx;
		margin-left: 48rpx;
	}

	.note_symbol {
		color: #EC5D29;
		margin-right: 10rpx;
	}

	.btn_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 131rpx;
		width: 580rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #999999;
		color: #fff;
		margin-left: 85rpx;
	}

	.red_btn {
		background-color: #F24C22;
	}

	/* ............................. */

	.box {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0 20rpx;
		padding-bottom: 40rpx;
		background: #103251;
		border-radius: 20rpx;
	}

	.box_title {
		padding: 30rpx 0;
		padding-left: 10rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.box_input {
		display: flex;
		align-items: center;
	}

	.box_symbol {
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
	}

	.box_symbol2 {
		font-size: 56rpx;
		padding-left: 20rpx;
		color: #fff;
	}

	.box_footer {
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #333333;
		height: 93rpx;
		border-top: 1rpx solid #D4D4D4;
		margin-top: 10rpx;
	}

	.box_red {
		color: #3577f1;
	}

	/* ....................................... */

	.user-head {
		height: 100upx;
	}

	.user-head-img {
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #333;
	}

	.cell-item {
		border: none;
	}

	.cell-item-bd {
		color: #666;
		font-size: 26upx;
	}

	.button-bottom .btn {
		width: 100%;
	}

	.yl-logo {
		width: 188upx;
		height: 54upx;
		float: left;
	}

	.withdrawcash-input {
		display: flex;
		align-items: center;
		font-size: 50upx;
		border-bottom: 2upx solid #e8e8e8;
		padding-bottom: 20upx;
		width: 95%;
		max-width: 95%;
	}

	.withdrawcash-input text {
		font-size: 40upx;
	}

	.withdrawcash-input input {
		display: inline-block;
		min-width: 500upx;
		padding-left: 20upx;
	}
</style>
